/**
 * Created by zzy on 2017/5/18.
 */
import React, {Component} from 'react';
import {
    Text,
    View,
    TouchableOpacity,
    Image,
    StyleSheet,
    ScrollView,
    PixelRatio,
    Animated,
    WebView,
    InteractionManager,
    Dimensions
} from 'react-native';
import ItemCell from '../../js/component/ItemCell'
import ViewPager from '../../js/component/ViewPager'
import NetRequestLuo from '../util/NetRequest'
import DataUtil from '../util/DataUtil'
import waterTiketStore from '../../js/store/WaterTiketStore'
import {observer} from 'mobx-react/native'
import LoadingView from '../../js/component/LoadingView'
import addressMgrStore from '../../js/store/AddrMgrStore'
import JudgeItemCell from '../componentluo/judgeitemcell'
import {observable, action, computed, observe} from 'mobx' ;
import CommonUtil from '../util/CommonUtil'
import Modal from 'react-native-modalbox';

let {width,height} = Dimensions.get('window');

//import Specifications from '../home/specifications'
@observer
export default class TicketDetail extends Component {
    @observable commonModels=[];

    constructor(props){
        super(props);
        this.productItemId=this.props.productItemId;
        this.shopId=this.props.shopId;
        this.navigate=this.props.navigate;
        this.state={
            loading:true,
            shop:{}
        }
    }
    render() {
        return <View style={ticketDetail_style.sv}>
            <LoadingView
                visible={this.state.loading}
                color="white"
                indicatorSize="small"
                messageFontSize={12}
                message=''
            />
            <ScrollView >
                <TiketCell/>
                <View style={ticketDetail_style.info}>
                    <View style={ticketDetail_style.name}>
                        <View style={[ticketDetail_style.border, ticketDetail_style.center, {marginRight: 5}]}>
                            <Text style={ticketDetail_style.self}>自营</Text>
                        </View>
                        <Text style={{color:'black',fontSize:15}}>{waterTiketStore.productModel.name+waterTiketStore.productModel.Volume+' 水票'}</Text>
                    </View>
                    <Text style={{marginTop: 5,fontSize:11}}>全市通用，每张水票换购一桶</Text>
                    <Text style={ticketDetail_style.price}>¥{DataUtil.f2y(waterTiketStore.productModel.ActiveProductItemModel.currentPrice)}</Text>
                </View>
                <View style={ticketDetail_style.group}>
                    <ItemCell name="选择套餐：" desc="" callback={this.pop2Specifications.bind(this)} rightArrowShow={true}/>
                    <View style={ticketDetail_style.group_choice}>
                        {
                            waterTiketStore.productModel.productItemModels.map((model,index)=>{
                                let bordercolor=waterTiketStore.productModel.activePolicyIndex==index?'#21ACEA':'gray';
                                return <TouchableOpacity style={[{borderWidth: 1 / PixelRatio.get(),marginLeft:10,
                                    justifyContent:'center'},{borderColor:bordercolor}]} key={index} onPress={()=>{
                                    waterTiketStore.productModel.setActivePolicyIndex(index);
                                }}>
                                    <Text style={{color:bordercolor,paddingHorizontal:5}}>{model.name}</Text>
                                </TouchableOpacity>
                            })
                        }
                    </View>
                </View>

                <View style={ticketDetail_style.detail}>

                    <Text>水票详情</Text>
                    <Text>1.该水票仅限购买该品牌水;</Text>
                    <Text>2.每张水票换购一桶;</Text>
                    <Text>3.过期作废</Text>
                </View>
                <View style={{marginTop: 20}}>
                    <ItemCell name={'商品评价('+this.commonModels.length+')'} desc="查看更多" callback={()=>{this.navigate('CommentList',{commonModels:this.commonModels})}}/>
                    {
                        this.commonModels.map((data,index)=>{
                            if(index>=2)return;
                            return <JudgeItemCell common={data} key={index}/>
                        })
                    }
                </View>
                <ShopInfo shop={this.state.shop} callback={()=>{this.navigate('WaterStation',{shopId:this.state.shop.shopId})}}/>
            </ScrollView>
            <PolicyModal ref={'PolicyModal'} productItemModels={waterTiketStore.productModel.productItemModels}></PolicyModal>
        </View>
    }

    pop2Specifications(){
        this.refs.PolicyModal.openModal();
    }
    componentDidMount(){
        InteractionManager.runAfterInteractions(() => {
            this.fetch();
            this._shopInfo();
        });
    }
    _shopInfo(){
        let shopParam={
            cityName: '',
            latitude: addressMgrStore.activeAddress.latitude,
            longtitude: addressMgrStore.activeAddress.longitude,
            shopId: this.shopId
        };
        NetRequestLuo.shopInfo(shopParam).then((data)=>{
            LOG('店铺信息---------'+JSON.stringify(data));
            this.setState({
                shop:data
            })
        })
    }

    fetch(){
        var tiketParam={
            productItemId:this.productItemId,
            shopId:this.shopId
        };
        NetRequestLuo.getTiketInfo(tiketParam).then((data)=>{
            LOG('product----------' + JSON.stringify(data));
            waterTiketStore.setProductItemModels(data);
            this.commonModels=data.commonModels;
            this.setState({
                loading:false
            })
        });
    }
}
class TiketCell extends Component{
    render(){
        return (<View
            style={{ backgroundColor: 'white',marginTop:10}}
        >
            <Image style={{flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
                padding: 10,
                margin: 10,
                width:width-30,
                height:150,
                resizeMode:'contain'}} source={require('../../luoasserts/tiket/tiket_bg.png')}>
                <View style={{marginLeft: 10,alignItems:'center'}}>
                    {/*<View style={{borderWidth: 1 / PixelRatio.get(),*/}
                        {/*borderColor: 'white',*/}
                        {/*width:30}}>*/}
                        {/*<Text style={{ fontSize: 10,*/}
                            {/*color: 'white',*/}
                            {/*textAlign: 'center',}}>自营</Text>*/}
                    {/*</View>*/}
                    {/*<Image style={{width: 65,*/}
                        {/*height: 65,*/}
                        {/*resizeMode: 'contain',*/}
                        {/*marginTop: 5}}*/}
                           {/*source={require('../../luoasserts/tiket/tiket_water_icon.png')}></Image>*/}
                    <View style={{alignItems:'center',marginLeft:20}}>
                        <Text style={{fontSize:20,color:'#0371BD'}}>水</Text>
                        <Text style={{fontSize:20,color:'#0371BD'}}>票</Text>
                    </View>
                </View>
                <View style={{flex: 1,
                    alignItems: 'center'}}>
                    <Text style={{ color: 'white',
                        fontSize: 25}}>{waterTiketStore.productModel.name}</Text>
                    <Text style={{color: 'white',
                        fontSize: 15,
                        marginTop: 7}}>{waterTiketStore.productModel.Volume}</Text>
                </View>
                <View style={{marginRight: 10,
                    alignItems:'center'}}>
                    {/*<View>*/}
                        {/*<Text style={{color: 'white',*/}
                            {/*fontSize: 20}}>水</Text>*/}
                        {/*<Text style={{color: 'white',*/}
                            {/*fontSize: 20}}>票</Text>*/}
                    {/*</View>*/}
                    {/*<Text style={{color: 'white',*/}
                        {/*fontSize: 13,*/}
                        {/*marginTop: 10}}>全市通用</Text>*/}
                    <View style={{alignItems:'center',marginRight:20}}>
                        <Text style={{color: 'white',fontSize: 20}}>{waterTiketStore.productModel.productItemModels[waterTiketStore.productModel.activePolicyIndex].baseCount+''}</Text>
                        <Text style={{color: 'white',fontSize: 20}}>张</Text>
                    </View>
                </View>
                <View style={{position:'absolute',right:20,bottom:20,backgroundColor:'#FF8853',padding:2}}>
                    <Text style={{color:'white',fontSize:13}}>{waterTiketStore.productModel.productItemModels[waterTiketStore.productModel.activePolicyIndex].name}</Text>
                </View>
                <Text style={{position:'absolute',left:20,bottom:20,color:'#0371BD',fontSize:13}}>每张换购1桶</Text>
            </Image>
        </View>)
    }
}
class ShopInfo extends Component{

    render(){
        let {callback}=this.props;
        let {imageUrl,name,totalProductCount,distance,score}=this.props.shop;
        return <View style={{backgroundColor:'white',padding:10,marginTop:20}}>

            <View style={{flexDirection:'row',alignItems:'center'}}>
                <Image style={{width:40,height:40,resizeMode:'contain'}} source={{uri:imageUrl}}></Image>
                <View style={{justifyContent:'center',marginLeft:5,flex:1}}>
                    <Text>喜腾山泉旗舰店</Text>
                    <View style={{flexDirection:'row',marginTop:3,alignItems:'center'}}>
                        {
                            CommonUtil.getStoreStars(score)
                        }
                        <Text style={{marginLeft:3}}>{score}</Text>
                    </View>
                </View>

                <TouchableOpacity style={{marginRight:10,borderRadius:3, borderWidth: 3 / PixelRatio.get(),padding:3,borderColor: '#1EAFF3'}}
                                  onPress={callback}
                >
                    <Text style={{color:'#1EAFF3'}}>进入店铺</Text>
                </TouchableOpacity>
            </View>
            <View style={{flexDirection:'row',justifyContent:'center',marginTop:20}}>
                <View style={{alignItems:'center',marginRight:100}}>
                    <Text style={{color:'black'}}>{totalProductCount+''}</Text>
                    <Text>全部商品</Text>
                </View>
                <View style={{alignItems:'center'}}>
                    <Text style={{color:'black'}}>{distance+''}</Text>
                    <Text>距离</Text>
                </View>
            </View>
        </View>
    }
}
 class PolicyModal extends Component{
     render(){
         let {productItemModels}=this.props;
         return <Modal
             position="bottom"
             ref={"PolicyModal"}
             backButtonClose={true}
             style={{
                 backgroundColor:'white',
                 height:270
             }}>
             <ScrollView>
                 <Text style={{width:width,textAlign:'center',padding:15,color:'black'}}>选择套餐</Text>
                 <View style={{flexDirection:'row',flexWrap:"wrap"}}>
                     {
                         productItemModels.map((model,index)=>{
                             let bordercolor=waterTiketStore.productModel.activePolicyIndex==index?'#21ACEA':'gray';
                             return <TouchableOpacity style={[{borderWidth: 2 / PixelRatio.get(),
                                 borderColor:bordercolor,width:width/2-10,padding:5,margin:5,color:'black'}]} key={index} onPress={()=>{
                                 waterTiketStore.productModel.setActivePolicyIndex(index);
                             }}>
                                 <Text style={{color:bordercolor,paddingHorizontal:5,textAlign:'center'}}>{model.name}</Text>
                             </TouchableOpacity>
                         })
                     }
                 </View>
             </ScrollView>
             <Text style={{width:width,padding:15,textAlign:'center',backgroundColor:'#FF4244',color:'white'}} onPress={this.closeModal.bind(this)}>确定</Text>
         </Modal>

     }
     openModal(){
         this.refs.PolicyModal.open();
     }
     closeModal(){
         this.refs.PolicyModal.close();
     }
 }
const ticketDetail_style = StyleSheet.create({
    sv: {
        backgroundColor: '#f5f5f5',
        flex: 1
    },
    swiper: {
        height: 0
    },
    swiper_image: {
        height: 150,
        resizeMode: 'cover'
    },
    info: {
        padding: 10,
        backgroundColor: 'white'
    },
    border: {
        borderWidth: 1 / PixelRatio.get(),
        borderColor: 'red'
    },
    center: {
        justifyContent: 'center',
        alignItems: 'center'
    },
    self: {
        fontSize: 10,
        fontWeight: '100',
        color: 'red',
        textAlign: 'justify',
        textAlignVertical: 'center'
    },
    name: {
        flexDirection: 'row'
    },
    price: {
        color: 'red',
        marginTop: 5
    },
    msg: {
        flexDirection: 'row',
        marginTop: 2,
        backgroundColor: 'white',
        padding: 10,
    },
    price_con: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    right_icon: {
        width: 13,
        height: 13,
        resizeMode: 'contain'
    },
    fee_text: {},
    group: {
        marginTop: 20
    },
    group_choice: {
        flexDirection: 'row',
        justifyContent: 'space-around',
        backgroundColor: 'white',
        padding: 10,
        flexWrap:'wrap'
    },
    choice_border: {
        borderWidth: 1 / PixelRatio.get(),
        borderColor: 'gray'
    },
    choice_text: {
        color: 'gray',
        textAlign: 'justify',
        textAlignVertical: 'center',
        padding: 5
    },
    detail: {
        backgroundColor: 'white',
        marginTop: 20,
        padding: 10
    },
    comment: {
        marginTop: 20,
    }

});